<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析研判-多类事件关联配置</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 备用方案：如果CDN失败，使用本地文件 -->
    <script>
        window.addEventListener('error', function(e) {
            if (e.target.href && e.target.href.includes('font-awesome')) {
                console.log('Font Awesome CDN加载失败，尝试使用本地备用方案');
                var link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = 'local-scripts/font-awesome-fallback.css';
                document.head.appendChild(link);
            }
        }, true);
    </script>
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: 'rgba(59, 130, 246, 0.15)',
                            mid: 'rgba(59, 130, 246, 0.4)',
                            main: 'rgba(59, 130, 246, 0.92)',
                            dark: 'rgba(37, 99, 235, 0.96)',
                            border: 'rgba(59, 130, 246, 0.4)',
                            hover: 'rgba(59, 130, 246, 0.2)'
                        },
                        text: {
                            primary: '#334155',
                            secondary: '#64748b'
                        },
                        bg: {
                            light: 'rgba(248, 250, 252, 0.9)',
                            card: 'rgba(255, 255, 255, 0.9)'
                        },
                        success: 'rgba(16, 185, 129, 0.92)',
                        warning: 'rgba(245, 158, 11, 0.92)',
                        error: 'rgba(239, 68, 68, 0.92)'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    },
                    borderRadius: {
                        small: '8px',
                        card: '12px'
                    },
                    boxShadow: {
                        card: '0 4px 12px rgba(0, 0, 0, 0.02)',
                        'card-hover': '0 6px 16px rgba(0, 0, 0, 0.04)'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-grid {
                background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .text-balance {
                text-wrap: balance;
            }
            .glass-effect {
                backdrop-filter: blur(20px);
            }
            .card-hover {
                transition: all 0.25s ease;
            }
            .card-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .hover-glow {
                transition: box-shadow 0.3s ease;
            }
            .hover-glow:hover {
                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
            }
        }
    </style>
</head>
<body class="bg-gray-50 bg-grid min-h-screen font-sans text-text-primary">
    <div class="container mx-auto p-4 md:p-6">
        <!-- 页面标题 -->
        <header class="mb-6">
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-semibold text-text-primary mb-2">分析研判-多类事件关联配置</h1>
            <p class="text-text-secondary text-balance">通过自定义规则将不同日志源进行关联，实现事件聚合和阈值告警</p>
        </header>

        <main class="space-y-6">
            <!-- 规则配置部分 -->
            <section id="rule-config" class="bg-bg-card rounded-card p-5 border border-primary-border shadow-card card-hover">
                <h2 class="text-lg font-medium mb-4 text-text-primary border-l-4 border-primary-main pl-3">规则配置</h2>
                
                <!-- 规则名称 -->
                <div class="form-group mb-4">
                    <label for="rule-name" class="block text-sm font-medium text-text-primary mb-2">规则名称</label>
                    <input type="text" id="rule-name" class="w-full px-4 py-2 rounded-small border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80 transition-all duration-300" placeholder="请输入规则名称">
                </div>

                <!-- 日志源配置区域 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <!-- 日志源1配置 -->
                    <div id="source1-config" class="bg-gray-50/80 p-4 rounded-small border border-gray-200">
                        <h3 class="text-sm font-medium mb-3 text-text-primary">日志源 1 配置</h3>
                        <div class="space-y-3">
                            <div>
                                <label for="source1-type" class="block text-sm text-text-secondary mb-1">日志源类型</label>
                                <select id="source1-type" class="w-full px-3 py-1.5 rounded-small border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80">
                                    <option value="attack">攻击日志</option>
                                    <option value="auth">认证日志</option>
                                    <option value="access">访问日志</option>
                                    <option value="system">系统日志</option>
                                </select>
                            </div>
                            <div>
                                <label for="source1-filter" class="block text-sm text-text-secondary mb-1">过滤条件</label>
                                <select id="source1-filter" class="w-full px-3 py-1.5 rounded-small border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80">
                                    <option value="source_ip">源地址</option>
                                    <option value="dest_ip">目标地址</option>
                                    <option value="username">用户名</option>
                                    <option value="event_type">事件类型</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- 日志源2配置 -->
                    <div id="source2-config" class="bg-gray-50/80 p-4 rounded-small border border-gray-200">
                        <h3 class="text-sm font-medium mb-3 text-text-primary">日志源 2 配置</h3>
                        <div class="space-y-3">
                            <div>
                                <label for="source2-type" class="block text-sm text-text-secondary mb-1">日志源类型</label>
                                <select id="source2-type" class="w-full px-3 py-1.5 rounded-small border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80">
                                    <option value="attack">攻击日志</option>
                                    <option value="auth">认证日志</option>
                                    <option value="access">访问日志</option>
                                    <option value="system">系统日志</option>
                                </select>
                            </div>
                            <div>
                                <label for="source2-filter" class="block text-sm text-text-secondary mb-1">过滤条件</label>
                                <select id="source2-filter" class="w-full px-3 py-1.5 rounded-small border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80">
                                    <option value="source_ip">源地址</option>
                                    <option value="dest_ip">目标地址</option>
                                    <option value="username">用户名</option>
                                    <option value="event_type">事件类型</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 关联配置 -->
                <div class="mb-6">
                    <h3 class="text-sm font-medium mb-3 text-text-primary">关联配置</h3>
                    <div class="flex items-center justify-between bg-primary-light/50 p-3 rounded-small">
                        <div id="correlation-preview" class="flex items-center space-x-4">
                            <span id="source1-field-display" class="px-3 py-1 bg-white/70 rounded-full text-sm">源地址</span>
                            <span class="text-text-secondary"><i class="fa fa-exchange"></i></span>
                            <span id="source2-field-display" class="px-3 py-1 bg-white/70 rounded-full text-sm">源地址</span>
                        </div>
                    </div>
                </div>

                <!-- 聚合配置 -->
                <div class="mb-6">
                    <h3 class="text-sm font-medium mb-3 text-text-primary">聚合配置</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="aggregation-window" class="block text-sm text-text-secondary mb-1">聚合时间窗口</label>
                            <div class="flex">
                                <input type="number" id="aggregation-window" value="5" min="1" class="flex-1 px-3 py-1.5 rounded-l-small border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80">
                                <select id="window-unit" class="px-3 py-1.5 rounded-r-small border border-l-0 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80">
                                    <option value="minute">分钟</option>
                                    <option value="second">秒</option>
                                    <option value="hour">小时</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label for="threshold-count" class="block text-sm text-text-secondary mb-1">阈值次数</label>
                            <div class="flex">
                                <select id="threshold-type" class="px-3 py-1.5 rounded-l-small border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80">
                                    <option value="gte">≥</option>
                                    <option value="gt">></option>
                                    <option value="lte">≤</option>
                                    <option value="lt"><</option>
                                    <option value="eq">=</option>
                                </select>
                                <input type="number" id="threshold-count" value="50" min="1" class="flex-1 px-3 py-1.5 rounded-r-small border border-l-0 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-main/50 focus:border-primary-main bg-white/80">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 描述信息 -->
                <div class="mb-6">
                    <h3 class="text-sm font-medium mb-3 text-text-primary">规则描述</h3>
                    <div id="rule-description" class="p-3 bg-gray-50/80 rounded-small border border-gray-200 text-text-secondary text-sm">
                        请配置规则参数，自动生成规则描述
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="button-group flex flex-wrap gap-3">
                    <button id="save-rule" class="px-4 py-2 bg-primary-main text-white rounded-small hover:bg-primary-dark transition-colors duration-300 hover-scale hover-glow">
                        <i class="fa fa-save mr-1"></i> 保存规则
                    </button>
                    <button id="apply-rule" class="px-4 py-2 bg-primary-light text-primary-dark border border-primary-border rounded-small hover:bg-primary-hover transition-colors duration-300 hover-scale hover-glow">
                        <i class="fa fa-check-circle mr-1"></i> 应用规则
                    </button>
                    <button id="clear-rule" class="px-4 py-2 bg-gray-100 text-text-secondary rounded-small hover:bg-gray-200 transition-colors duration-300 hover-scale">
                        <i class="fa fa-refresh mr-1"></i> 清空配置
                    </button>
                    <button id="import-rules-btn" class="px-4 py-2 bg-gray-100 text-text-secondary rounded-small hover:bg-gray-200 transition-colors duration-300 hover-scale hover-glow">
                        <i class="fa fa-upload mr-1"></i> 导入规则
                    </button>
                    <button id="export-rules-btn" class="px-4 py-2 bg-gray-100 text-text-secondary rounded-small hover:bg-gray-200 transition-colors duration-300 hover-scale hover-glow">
                        <i class="fa fa-download mr-1"></i> 导出规则
                    </button>
                </div>
            </section>

            <!-- 规则列表 -->
            <section id="rule-list" class="bg-bg-card rounded-card p-5 border border-primary-border shadow-card card-hover transition-all-300 hover-lift">
                <h2 class="text-lg font-medium mb-4 text-text-primary border-l-4 border-primary-main pl-3">已保存规则</h2>
                <div id="rules-container" class="space-y-3">
                    <!-- 规则列表将通过JavaScript动态生成 -->
                    <div class="text-center text-text-secondary py-8">
                        <i class="fa fa-file-text-o text-4xl mb-2 text-gray-300"></i>
                        <p>暂无保存的规则</p>
                    </div>
                </div>
            </section>

            <!-- 模拟结果区域 -->
            <section id="simulation-section" class="bg-bg-card rounded-card p-5 border border-primary-border shadow-card card-hover transition-all-300 hover-lift">
                <h2 class="text-lg font-medium mb-4 text-text-primary border-l-4 border-primary-main pl-3">模拟与测试</h2>
                <div class="flex flex-wrap gap-3 mb-4">
                    <button id="generate-logs" class="px-4 py-2 bg-success text-white rounded-small hover:bg-opacity-90 transition-colors duration-300 hover-scale hover-glow">
                        <i class="fa fa-random mr-1"></i> 生成模拟日志
                    </button>
                    <button id="view-events" class="px-4 py-2 bg-warning text-white rounded-small hover:bg-opacity-90 transition-colors duration-300 hover-scale hover-glow">
                        <i class="fa fa-list mr-1"></i> 查看触发事件
                    </button>
                </div>
                <div id="simulation-results" class="max-h-80 overflow-y-auto bg-white rounded-small border border-gray-200 shadow-sm">
                    <div id="results-header" class="flex items-center justify-between p-3 bg-gray-50 border-b border-gray-200">
                        <h3 class="text-sm font-medium text-text-primary">日志/事件展示</h3>
                        <button id="clear-results" class="text-text-secondary hover:text-text-primary text-sm">
                            <i class="fa fa-trash-o mr-1"></i> 清空
                        </button>
                    </div>
                    <div id="results-content" class="p-4 min-h-40">
                        <div class="text-center text-text-secondary py-6">
                            <i class="fa fa-info-circle text-2xl mb-2 text-gray-300"></i>
                            <p>点击上方按钮生成模拟日志或查看触发事件</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 导入文件输入 -->
    <input type="file" id="file-input" accept=".json" class="hidden">

    <!-- 脚本文件 -->
    <script src="script.js"></script>
</body>
</html>